// //加载公共样式
require('../../assets/css/public.less')
// //加载自己的样式
require('./mine.less');

// 引入swiper的css
require('swiper/dist/css/swiper.min.css')

// 引入swiper
const mySwiper = require('swiper')

//引入tabbar渲染函数
const renderTabbar = require('../../lib/tabbar/tabbar')

//引入axios工具函数
const request = require('../../lib/request/request')

//服务器地址
const API = 'http://fitness.h5.itsource.cn:3701'

// 获取元素
function $(sel) {
    return document.querySelector(sel)
}

window.onload = () => {
    //渲染tabbar
    renderTabbar('mine')

    // 引入swiper
    let mySwiper = new Swiper('.swiper-container', {
        autoplay: 5000,//可选选项，自动滑动
        loop: true,
        // 如果需要分页器
        pagination: '.swiper-pagination',
    })

    // 获取打卡信息
    function getClockInfo() {
        request.get('/api/user/clockInInfo')
            .then(res => {
                console.log(res);
                // 解构数据
                let { data, errno } = res.data
                // 判断
                if (errno === 0) {
                    console.log(data.isClockIn);
                    if (data.isClockIn === true) {
                        $('.dayCard').textContent = '今日已打卡'
                        $('.dayCard').classList.add('locked')

                    } else {
                        $('.dayCard').textContent = '今日未打卡'
                        $('.dayCard').classList.remove('locked')
                    }
                }
            })
    }
    getClockInfo()

    //获取用户信息
    function getUserInfo() {
        request.get('/api/user/info')
            .then(res => {
                console.log(res);
                //1 解构数据
                let { errno, data } = res.data
                //2 判断
                if (errno === 0) {
                    //3 处理业务逻辑数据
                    render(data)
                }
            })
    }

    //渲染数据
    function render(data) {
        //图片渲染 服务器地址+相对路径+文件名
        $('.headImg').src = API + data.imgUrl
        // 更新渲染数据
        // 打卡天数
        $('.dayNum').textContent = data.clockCount
        // 圈子数量
        $('.stateNum').textContent = data.circlesCount
        // 时长
        $('.sportDate').textContent = data.duration
        //  公里
        $('.sportDate').textContent = data.meter
        // 签名
        $('.signText').textContent = data.sign
        // 昵称
        $('.userName').textContent = data.nickName
        // 本周消耗
        $('.qk').textContent = data.calorie
    }

    //初始化获取用户信息
    getUserInfo()



    // 点击打卡切换样式，并渲染数据
    $('.dayCard').addEventListener('click', () => {
        request.post('/api/user/clockIn')
            .then(res => {
                console.log(res);
                // 解构数据
                let { data, errno } = res.data
                // 判断
                if (errno === 0) {
                    // 渲染数据
                    getClockInfo()
                    getUserInfo()
                    alert('打卡成功')
                } else {
                    alert(res.data.message)
                }
            })
    })
}